<template>
	<view class="container" style="padding-bottom: 90px">
		<!--  tab 栏 -->
		<view class="wh100">
			<view class="tabs">
				<u-tabs :list="tabMenus" lineColor="#F3C45D" lineWidth="30" keyName="text" :activeStyle="activeStyle" @click="onTabClick"></u-tabs>
			</view>
			<view style="display: flex; align-items: center; color: #999; font-size: 24rpx; margin-top: 10rpx; margin-left: 10rpx; margin-right: 10rpx; background-color: #fff">
				<view style="flex: 1">
					<lai-search placeholder="请输入菜名" @search="onSearchFood"></lai-search>
				</view>
				<text @click="onDelete" style="margin-left: 20rpx">清空全部</text>
				<u-icon @click="onDelete" name="trash"></u-icon>
			</view>
			<view class="data-empty-wh100" v-if="pageList == null || pageList.length == 0">
				<u-empty text="估清为空~~" />
			</view>
			<view v-else class="items-container" style="padding-bottom: 90px">
				<view
					class="items"
					:id="`menu-${item.id}`"
					v-for="(item, index) in pageList"
					:key="item.id"
					style="margin: 15px 20rpx; background-color: #fff; border-radius: 10px; padding: 12px 15px; display: flex; flex-direction: column"
				>
					<view style="display: flex; justify-content: space-between">
						<view class=".flex-center" style="flex: 1">
							<text class="ellipsis-single">{{ item.foodName }}</text>
							<text style="color: #999; font-size: 24rpx">（{{ item.specName }}）</text>
						</view>

						<view class=".flex-center">
							<view style="margin-right: 20rpx" @click="btnAddClick(item)">
								<u-icon name="edit-pen-fill"></u-icon>
							</view>
							<u-icon name="trash" @click="onDelete(item)"></u-icon>
						</view>
					</view>

					<view class="">
						<text style="color: #999; font-size: 24rpx">估清数量：{{ item.soldout }}</text>
						<text v-if="item.recoveryQty" style="color: #999; font-size: 24rpx; margin-left: 30rpx">周期数量：{{ item.recoveryQty }}</text>
					</view>
				</view>

				<!-- 加载更多 -->
				<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" :loadmore="onReachBottomEvent" line />
			</view>
		</view>

		<view class="bottom-add" @click="btnAddClick(0)">新建估清</view>
	</view>
</template>

<script>
import { guqingTypeEnum } from '@/constants/normalConstants';
import { uNavigateTo, uShowLoading, uHideLoading, utoast, umodal } from '@/utils/uniUtils.js';
export default {
	data() {
		return {
			activeStyle: {
				color: '#F3C45D'
			},
			loadStatus: 'loadmore',
			loadingText: '努力加载中。。。',
			loadmoreText: '上拉加载更多~~',
			nomoreText: '已全部加载~~',
			curCataIdx: 0,
			tabMenus: guqingTypeEnum, // 上tab
			leftMenus: [], // 左tab
			pageList: [], // 内容列表
			disabled: true, // 禁用
			lock: false, // 节流锁

			/* 分页数据区域 */
			pageNum: 1,
			pageSize: 10,
			total: 0,
			showLoadMore: false,
			name: ''
		};
	},
	onShow() {
		this.pageNum = 1;
		this.getGuqingList(1);
	},
	methods: {
		btnAddClick(item) {
			if (item) {
				// 编辑
				uni.navigateTo({
					url: '/pages/workbench/guqing/edit?form=' + JSON.stringify(item)
				});
			} else {
				// 新建
				uni.navigateTo({
					url: '/pages/workbench/guqing/edit?curCataIdx=' + this.curCataIdx
				});
			}
		},
		onTabClick(val) {
			this.pageNum = 1;
			this.curCataIdx = val.value;
			this.getGuqingList(1);
		},
		async getGuqingList(isPush, name) {
			const res = await this.$api.getGuqingListAPI({
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				soldoutType: this.curCataIdx,
				name: this.name
			});
			if (isPush) {
				this.pageList = res.data;
			} else {
				this.pageList = [...this.pageList, ...JSON.parse(JSON.stringify(res.data))];
			}

			this.total = res.count;
			if (this.pageList.length == this.total) {
				this.loadStatus = 'nomore';
			} else {
				this.loadStatus = 'loadmore';
			}
			this.showLoadMore = false;
		},
		onReachBottomEvent() {
			// 拉新数据再拼接
			if (this.pageList.length < this.total) {
				this.showLoadMore = true;
				setTimeout(async () => {
					uShowLoading();
					if (this.showLoadMore) {
						this.pageNum += 1;
					}
					this.loadStatus = 'loading';
					await this.getGuqingList(0);
					uHideLoading();
				}, 300);
			}
		},
		onDelete(item) {
			uni.showModal({
				title: '温馨提示',
				message: '确认删除吗',
				success: async (res) => {
					if (res.confirm) {
						if (item) {
							await this.$api.deleteGuqingAPI({ id: item.id });
						} else {
							await this.$api.clearGuqingAPI();
						}

						uni.showToast({
							title: '删除成功'
						});
						this.pageNum = 1;
						this.getGuqingList(1);
					}
				}
			});
		},
		async onSearchFood(e) {
			this.name = e;
			this.curCataIdx = 0;
			this.pageNum = 1;
			await this.getGuqingList(1);
		}
	},
	onReachBottom() {
		// 触底
		this.onReachBottomEvent();
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100.1vh;
	.tabs {
		position: sticky;
		top: 0;
		background-color: #fff;
	}
	.details {
		background-color: #fff;
	}

	.bottom-add {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background-color: #f3c45d;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		z-index: 9999;
	}
}
</style>
